/* 将所有单行注释转换为标准CSS注释 */

/* 调整标签容器样式 */
.tabs-header-container {
  width: 100%;
  margin-top: -25px;
  position: relative;
  z-index: 10;
}

/* 简化标签页样式，更加现代简约 */
.main-tabs {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  
  :deep(.el-tabs__header) {
    margin-bottom: 0;
    border-bottom: none;
    background: transparent;
  }
  
  :deep(.el-tabs__nav-wrap) {
    &::after {
      display: none; /* 移除底部线条 */
    }
  }
  
  :deep(.el-tabs__nav) {
    border: none;
  }
  
  :deep(.el-tabs__item) {
    height: 50px;
    line-height: 50px;
    color: rgba(48, 49, 51, 0.7);
    font-weight: 400;
    transition: color 0.3s, opacity 0.3s;
    
    &:hover {
      color: #409EFF;
    }
    
    &.is-active {
      color: #409EFF;
      font-weight: 500;
      
      &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 2px;
        background-color: #409EFF;
      }
    }
  }
  
  :deep(.el-tabs__active-bar) {
    display: none;
  }
}

/* 内容区域稍微上移，创造连续感 */
.search-section {
  margin-top: 15px;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* 移动端适配 */
@media (max-width: 768px) {
  .main-tabs {
    padding: 0 10px;
  }
}

.trade-container {
  padding: 0 0 40px;
  min-height: 100vh;
  background-color: #f7f9fc;
  
  .trade-header {
    background: linear-gradient(135deg, #3a7bd5, #00d2ff);
    padding: 60px 20px;
    color: white;
    text-align: center;
    margin-bottom: 40px;
    position: relative;
    overflow: hidden;
    
    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-image: url('');
      opacity: 0.2;
    }
    
    .trade-header-content {
      position: relative;
      z-index: 1;
      max-width: 800px;
      margin: 0 auto;
    }
    
    .trade-title {
      font-size: 36px;
      font-weight: 800;
      margin-bottom: 10px;
      letter-spacing: 1px;
      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
    
    .trade-subtitle {
      font-size: 18px;
      opacity: 0.9;
      margin-bottom: 20px;
    }
    
    .trade-decoration {
      width: 80px;
      height: 4px;
      background: white;
      margin: 0 auto;
      border-radius: 2px;
    }
  }

  .main-tabs {
    margin: 0;
    
    :deep(.el-tabs__header) {
      margin-bottom: 0;
      background-color: transparent;
      padding: 0;
      border-radius: 16px 16px 0 0;
      box-shadow: none;
      border-bottom: none; // 移除默认边框
    }
    
    :deep(.el-tabs__nav-wrap) {
      padding: 0;
      
      &::after {
        height: 0; // 移除底部线条
      }
    }
    
    :deep(.el-tabs__nav) {
      width: 100%; // 使导航栏铺满宽度
      display: flex;
      border-bottom: none; // 移除边框
    }
    
    :deep(.el-tabs__item) {
      flex: 1;
      height: 50px;
      line-height: 50px;
      text-align: center;
      font-size: 15px;
      color: #606266;
      transition: all 0.3s;
      position: relative;
      padding: 0;
      
      &:hover {
        color: #409EFF;
      }
      
      &.is-active {
        font-weight: 500;
        color: #409EFF;
        
        // 替换为渐变底部指示器
        &::after {
          content: '';
          position: absolute;
          bottom: 0;
          left: 50%;
          transform: translateX(-50%);
          width: 30px; // 固定宽度的指示器
          height: 3px;
          background: linear-gradient(90deg, #409EFF, #79bbff);
          border-radius: 3px 3px 0 0;
          transition: all 0.3s;
        }
      }
    }
    
    // 隐藏默认的活动指示条
    :deep(.el-tabs__active-bar) {
      display: none;
    }
  }

  .search-section {
    margin-top: -1px; // 轻微重叠，创造连续感
    position: relative;
    z-index: 9;
    border-top-left-radius: 0;  
    border-top-right-radius: 0;
    margin: 0 0 25px;
    padding: 20px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);

    .search-form {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 12px;
      
      .el-form-item {
        margin-bottom: 0;
      }
      
      .search-buttons {
        display: flex;
        gap: 10px;
      }
    }
  }

  .items-section {
    padding: 0 20px;
    
    .section-title {
      display: flex;
      align-items: center;
      margin-bottom: 24px;
      
      .title-icon {
        width: 4px;
        height: 20px;
        background: #3a7bd5;
        border-radius: 2px;
        margin-right: 10px;
      }
      
      h3 {
        font-size: 20px;
        font-weight: 600;
        color: #303133;
        margin: 0;
      }
      
      .title-count {
        margin-left: 10px;
        color: #909399;
        font-size: 14px;
      }
    }
    
    .el-row {
      margin-left: -6px !important;
      margin-right: -6px !important;
      
      .el-col {
        padding-left: 6px !important;
        padding-right: 6px !important;
      }
    }
    
    .item-card {
      transform: scale(0.9);
      margin-bottom: 20px;
      border-radius: 12px;
      overflow: hidden;
      position: relative;
      border: none;

      &:hover {
        transform: scale(0.93);
      }
      
      .item-badge {
        position: absolute;
        top: 12px;
        right: 12px;
        padding: 4px 8px;
        border-radius: 20px;
        font-size: 11px;
        font-weight: 500;
        color: white;
        z-index: 2;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        
        &.badge-equipment {
          background: linear-gradient(135deg, #3498db, #2980b9);
        }
        
        &.badge-item {
          background: linear-gradient(135deg, #2ecc71, #27ae60);
        }
        
        &.badge-pet {
          background: linear-gradient(135deg, #f39c12, #e67e22);
        }

        &.badge-fashion {
          background: linear-gradient(135deg, #9b59b6, #8e44ad);
        }
      }

      .item-image {
        height: 140px; /* 从原来的160px减小一点 */
        background-color: #f5f7fa;
        display: flex;
        align-items: center;
        justify-content: center;
        
        .el-image {
          width: 80%; /* 限制图片宽度为容器的80% */
          height: 80%; /* 限制图片高度为容器的80% */
          transition: transform 0.3s;
          
          // 对于contain模式，图片可能不会填满容器，添加居中显示
          :deep(.el-image__inner) {
            object-fit: contain;
          }
          
          &:hover {
            transform: scale(1.05);
          }
        }
      }

      .item-info {
        padding: 10px;
        background: white;
        position: relative;
        cursor: pointer; // 添加鼠标指针样式，表明可点击

        .item-name-row {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-bottom: 8px;
          
          .item-name {
            margin: 0;
            font-size: 16px;
            flex: 1;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          
          .item-stock {
            margin-left: 8px;
            
            .stock-tag {
              display: flex;
              align-items: center;
              background-color: #f2f6fc;
              padding: 2px 8px;
              border-radius: 12px;
              font-size: 12px;
              color: #409EFF;
              
              .el-icon {
                font-size: 14px;
                margin-right: 4px;
              }
              
              span {
                font-weight: 600;
              }
            }
          }
        }

        .item-price {
          display: flex;
          align-items: center;
          gap: 4px;
          color: #f56c6c;
          font-size: 16px;
          font-weight: 700;
          margin-bottom: 8px;
          
          &::after {
            font-size: 12px;
            color: #909399;
            font-weight: normal;
          }
          
          .el-icon {
            font-size: 14px;
          }
        }

        // 移除或隐藏卖家信息
        .item-seller {
          display: none; // 隐藏卖家信息
        }

        .buy-button {
          width: 100%;
          font-size: 13px;
          letter-spacing: 0.5px;
          border-radius: 8px;
          height: 32px;
          transition: all 0.3s;
          background: linear-gradient(135deg, #3a7bd5, #4285f4);
          border: none;
          opacity: 0.9;
          transform: translateY(5px);
          
          &:hover {
            transform: translateY(-2px) !important;
            box-shadow: 0 6px 16px rgba(66, 133, 244, 0.4);
            opacity: 1;
          }
        }
      }
    }
  }

  .pagination-container {
    margin-top: 20px; /* 增加顶部边距 */
    display: flex;
    justify-content: center;
    padding: 15px 0;
  }
}

/* 移动端适配的分页样式 */
@media (max-width: 768px) {
  .pagination-container {
    padding: 10px 0;
    
    :deep(.el-pagination) {
      white-space: nowrap; /* 防止元素换行 */
      justify-content: center;
      width: 100%;
      
      /* 调整按钮和输入框大小，增加触控友好度 */
      .el-pagination__sizes,
      .el-pagination__jump {
        margin: 0 5px;
      }
      
      .el-pagination__editor.el-input {
        width: 40px; /* 减小跳转输入框宽度 */
      }
      
      /* 简化布局，在超小屏幕上隐藏部分元素 */
      @media (max-width: 480px) {
        /* 在非常小的屏幕上使用更紧凑的布局 */
        .el-pagination__sizes {
          margin-right: 5px;
        }
        
        .el-pagination__sizes .el-select .el-input {
          width: 80px;
        }
        
        .el-pagination button {
          min-width: 28px;
          padding: 0 6px;
        }
        
        /* 优化页码显示 */
        .el-pager li {
          min-width: 28px;
        }
      }
      
      /* 提高触摸目标大小 */
      button, .el-pager li {
        height: 32px;
        line-height: 32px;
      }
    }
  }
  
  /* 为特定的分页容器添加样式 - 例如历史记录分页 */
  .history-container .pagination-container {
    margin-top: 20px;
    
    :deep(.el-pagination) {
      /* 极小屏幕上调整布局 */
      @media (max-width: 360px) {
        .el-pagination__total,
        .el-pagination__sizes {
          display: none !important; /* 在极小屏幕上隐藏总数和每页数量选择器 */
        }
        
        .btn-prev,
        .btn-next,
        .el-pager {
          margin: 0 2px;
        }
      }
    }
  }
}

.my-trade-container {
  background: white;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  
  .price-text {
    color: #f56c6c;
    font-weight: 600;
    &::after {
      content: ' XIN豆';
      font-weight: normal;
      color: #909399;
      font-size: 12px;
    }
  }
}

.floating-add-btn {
  position: fixed;
  bottom: 40px;
  right: 40px;
  z-index: 1000;
  padding: 12px 20px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
  transition: all 0.3s;
  
  .el-icon {
    margin-right: 5px;
  }
  
  &:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
  }
}

.item-preview {
  display: flex;
  background: #f8f9fa;
  border-radius: 8px;
  padding: 15px;
  
  .preview-image {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 8px;
    margin-right: 15px;
  }
  
  .preview-details {
    flex: 1;
    
    h4 {
      margin: 0 0 8px;
      font-weight: 600;
    }
    
    p {
      margin: 0;
      color: #606266;
      font-size: 14px;
    }
  }
}

.price-unit {
  margin-left: 10px;
  color: #909399;
}

.edit-price-item {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  padding: 10px;
  background: #f8f9fa;
  border-radius: 8px;
  
  .edit-price-image {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 6px;
    margin-right: 15px;
  }
}

// 添加交易记录样式

.history-container {
  background: white;
  border-radius: 16px;
  // padding: 20px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.history-filter {
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid #f0f2f5;
}

.history-item {
  display: flex;
  align-items: center;
  gap: 10px;
}
  
  .history-item-image {
    width: 50px;
    height: 50px;
    flex-shrink: 0; /* 防止图片被压缩 */
    object-fit: contain; /* 保持图片比例 */
    background-color: #f5f7fa; /* 添加背景色增强视觉效果 */
    border-radius: 4px; /* 添加圆角 */
    padding: 4px; /* 添加内边距，确保边缘内容不会紧贴边框 */
    border: 1px solid #ebeef5; /* 添加边框 */
    display: flex; /* 使用flex布局 */
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
  }
  
  .history-item-info {
    display: flex;
    flex-direction: column;
  min-width: 0; /* 允许子元素溢出 */
}

.history-item-info .history-item-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%; /* 使用百分比适应容器宽度 */
  margin-bottom: 5px;
  font-size: 14px;
      font-weight: 500;
}

.history-user {
  display: flex;
  align-items: center;
  gap: 8px;
}

.history-pagination {
  margin-top: 30px;
  display: flex;
  justify-content: center;
}

.history-row {
  transition: background-color 0.3s;
  
  &:hover {
    background-color: #f8fafc !important;
  }
}

// 移动端适配
@media (max-width: 768px) {
  .history-filter {
    .el-form {
      flex-direction: column;
      align-items: stretch;
      
      .el-form-item {
        margin-right: 0;
        margin-bottom: 12px;
      }
      
      .el-date-editor {
        width: 100%;
      }
    }
  }
  
  .history-item {
    .history-item-image {
      width: 40px;
      height: 40px;
    }
  }
}

// 移除顶部数量标签样式，添加商品名称旁边的数量标签样式

// 移除顶部的stock-badge样式（保留item-badge样式）

// 添加新的商品名称行样式
.item-info {
  // 其他样式保持不变...
  
  .item-name-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    
    .item-name {
      margin: 0;
      font-size: 16px;
      flex: 1;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
    .item-stock {
      margin-left: 8px;
      
      .stock-tag {
        display: flex;
        align-items: center;
        background-color: #f2f6fc;
        padding: 2px 8px;
        border-radius: 12px;
        font-size: 12px;
        color: #409EFF;
        
        .el-icon {
          font-size: 14px;
          margin-right: 4px;
        }
        
        span {
          font-weight: 600;
        }
      }
    }
  }
}

// 移除冲突样式
.stock-badge {
  display: none; // 隐藏旧的数量标签
}

// 交易说明样式
.market-notice {
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  margin-bottom: 20px;
  overflow: hidden;
  
  .notice-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #f0f2f5;
    
    h3 {
      margin: 0;
      font-size: 16px;
      font-weight: 600;
      color: #303133;
    }
    
    .el-button {
      display: flex;
      align-items: center;
      font-size: 14px;
      
      .el-icon {
        margin-left: 4px;
      }
    }
  }
  
  .notice-content {
    padding: 16px 20px;
    font-size: 14px;
    color: #606266;
    line-height: 1.8;
    
    p {
      margin: 0 0 10px;
      
      &:last-child {
        margin-bottom: 0;
      }
      
      strong {
        color: #303133;
        font-weight: 600;
      }
    }
    
    .notice-alert {
      background-color: #f8f4eb;
      border-left: 4px solid #e6a23c;
      padding: 12px 16px;
      margin: 16px 0;
      border-radius: 4px;
      
      p {
        margin-bottom: 6px;
        color: #976214;
        
        &:last-child {
          margin-bottom: 0;
        }
      }
    }
    
    .notice-warning {
      background-color: #fef0f0;
      border-left: 4px solid #f56c6c;
      padding: 12px 16px;
      margin: 16px 0;
      border-radius: 4px;
      
      h4 {
        margin: 0 0 10px;
        color: #cf1322;
        font-size: 15px;
        font-weight: 600;
      }
      
      p {
        margin-bottom: 6px;
        color: #cf1322;
        opacity: 0.85;
        
        &:last-child {
          margin-bottom: 0;
          font-weight: 600;
        }
      }
    }
  }
}

// 移动端适配
@media (max-width: 768px) {
  .market-notice {
    border-radius: 8px;
    
    .notice-header {
      padding: 12px 16px;
    }
    
    .notice-content {
      padding: 12px 16px;
      font-size: 13px;
    }
  }
}

/* 调整搜索栏下拉框宽度 */
.search-section {
  .search-form {
    .el-select {
      width: 160px; /* 增加下拉框宽度 */
      // min-width: 160px; /* 确保最小宽度 */
    }
    
    /* 为CEF浏览器添加高度限制 */
    // .el-select,
    // .el-input,
    // .el-input-number,
    // .el-checkbox {
    //   height: 32px !important;
    //   line-height: 32px !important;
    // }

    /* 修复CEF浏览器中的dropdown样式 */
    // :deep(.el-input__wrapper),
    // :deep(.el-input-number__decrease),
    // :deep(.el-input-number__increase),
    // :deep(.el-input-number__inner) {
    //   height: 32px !important;
    //   line-height: 32px !important;
    //   box-sizing: border-box !important;
    // }
    
    /* 确保按钮不被影响 */
    .el-button {
      height: 32px !important;
      line-height: 1 !important;
    }
    
    /* 移动端适配 */
    @media (max-width: 768px) {
      .el-select {
        width: 140px;
      }
    }
  }
}

/* 调整交易记录页面下拉框宽度 */
.history-panel {
  .el-form {
    .el-select {
      width: 160px; /* 增加下拉框宽度 */
      min-width: 160px; /* 确保最小宽度 */
    }
  }
}

/* 如果"我的交易"页面也有下拉框，同样调整 */
.my-trade-container {
  .el-form {
    .el-select {
      width: 160px;
      min-width: 160px;
    }
  }
}

/* 移动端适配 */
@media (max-width: 768px) {
  .history-panel .el-form .el-select,
  .my-trade-container .el-form .el-select {
    width: 140px;
  }
}

/* 特别增加交易类型下拉框宽度 */
.search-section .search-form .el-form-item:nth-child(2) .el-select {
  width: 180px; /* 交易类型下拉框比其他下拉框更宽 */
  // min-width: 180px;
}

/* 交易记录页面中的交易类型下拉框 */
.history-panel .el-form .el-form-item:nth-child(2) .el-select {
  width: 180px;
  min-width: 180px;
}

/* 移动端适配 */
@media (max-width: 768px) {
  .search-section .search-form .el-form-item:nth-child(2) .el-select,
  .history-panel .el-form .el-form-item:nth-child(2) .el-select {
    width: 150px;
  }
}

/* 添加CEF浏览器特定修复，确保表单项高度一致 */
.search-section .search-form .el-form-item {
  margin-bottom: 0 !important;
  height: 40px !important;
}

/* 修复CEF浏览器中的复选框错位问题 */
.search-section .search-form .el-checkbox {
  display: flex !important;
  align-items: center !important;
}

.search-section .search-form .el-checkbox__input {
  display: inline-flex !important;
  align-items: center !important;
  vertical-align: middle !important;
}

/* 历史记录查询面板高度修复 */
.history-filter {
  .el-form-item {
    height: 40px !important;
    margin-bottom: 0 !important;
  }
  
  .el-input, 
  .el-select, 
  .el-date-picker {
    height: 32px !important;
    line-height: 32px !important;
  }
  
  :deep(.el-input__wrapper) {
    height: 32px !important;
    line-height: 32px !important;
  }
  
  /* 日期选择器特殊处理 */
  :deep(.el-date-editor) {
    height: 32px !important;
    line-height: 32px !important;
    width: 230px !important;
    
    .el-range__icon, 
    .el-range__close-icon,
    .el-range-separator {
      line-height: 32px !important;
    }
    
    .el-range-input {
      height: 32px !important;
      line-height: 32px !important;
    }
  }
}

/* 为了防止所有形式的元素拉伸，添加全局CEF兼容样式 */
// :deep(.el-select),
// :deep(.el-input),
// :deep(.el-input-number),
// :deep(.el-date-editor),
// :deep(.el-range-editor) {
//   &, .el-input__wrapper, input {
//     max-height: 32px !important;
//     min-height: 32px !important;
//     height: 32px !important;
//     box-sizing: border-box !important;
//   }
// }

// 商品详情对话框样式
.item-detail-dialog {
  :deep(.el-dialog__title) {
    font-weight: 600;
    font-size: 18px;
  }
  
  .item-detail-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
    
    .item-detail-image {
      width: 100%;
      height: 250px;
      border-radius: 8px;
      overflow: hidden;
      
      .el-image {
        width: 100%;
        height: 100%;
      }
      
      .image-error {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        background: #f5f7fa;
        color: #909399;
        font-size: 30px;
      }
    }
    
    .item-detail-info {
      .detail-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 15px;
        
        .detail-name {
          margin: 0;
          font-size: 20px;
          font-weight: 600;
        }
      }
      
      .detail-price, .detail-stock {
        margin-bottom: 12px;
        font-size: 16px;
        
        .price-label, .stock-label {
          color: #606266;
          margin-right: 8px;
        }
        
        .price-value {
          font-size: 20px;
          font-weight: 700;
          color: #f56c6c;
        }
        
        .stock-value {
          font-weight: 600;
          color: #409EFF;
        }
        
        .price-unit, .stock-unit {
          margin-left: 5px;
          color: #909399;
          font-size: 14px;
        }
      }
      
      .detail-description {
        margin-top: 20px;
        
        h4 {
          font-size: 16px;
          margin: 0 0 10px;
          color: #303133;
        }
        
        p {
          margin: 0;
          color: #606266;
          line-height: 1.6;
          font-size: 14px;
        }
      }
    }
  }
  
  .detail-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
  }
}

// 移动端适配
@media (max-width: 768px) {
  .item-detail-dialog {
    .item-detail-content {
      .item-detail-image {
        height: 200px;
      }
    }
  }
}

/* 添加自定义样式以增强加载体验 */
:deep(.el-loading-mask) {
  z-index: 10000;
  
  .el-loading-spinner {
    .circular {
      width: 50px;
      height: 50px;
    }
    
    .el-loading-text {
      font-size: 16px;
      margin-top: 15px;
      color: #409EFF;
    }
  }
}

/* 上架物品对话框样式 */
.list-item-container {
  gap: 20px;
  height: auto;  // 改为auto，允许内容决定高度
  min-height: 550px;
  overflow: hidden;  // 防止内容溢出
  
  .inventory-section {
    flex: 1;
    max-width: 350px;
    
    .inventory-list {
      height: 600px !important;  // 再次增加背包列表高度，提供更充足的显示空间
      max-height: 600px !important;
      overflow-y: auto !important;  // 强制允许垂直滚动
      overflow-x: hidden;
      background: #f5f7fa;
      border-radius: 8px;
      padding: 12px;
      box-sizing: border-box;
      
      .inventory-item {
        border: 1px solid #e4e7ed;
        border-radius: 6px; /* 减小圆角 */
        padding: 8px; /* 减小内边距 */
        margin-bottom: 8px; /* 减小下边距 */
        cursor: pointer;
        transition: all 0.2s ease;
        
        &:hover {
          border-color: #c0c4cc;
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }
        
        &.inventory-item-selected {
          border-color: #409EFF;
          background-color: rgba(64, 158, 255, 0.1);
        }
        
        .inventory-item-header {
          display: flex;
          gap: 12px;
          margin-bottom: 10px;
        }
        
        .inventory-item-image {
          width: 60px; /* 减小图片尺寸 */
          height: 60px;
          border-radius: 4px;
          margin-bottom: 4px;
        }
        
        .inventory-item-info {
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: center;
        }
        
        .inventory-item-name {
          font-weight: 600;
          font-size: 12px; /* 减小字体 */
          margin-bottom: 2px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          max-width: 70px;
          text-align: center;
        }
        
        .shiny-badge {
          font-size: 11px;
          color: #e6a23c;
          background: rgba(230, 162, 60, 0.1);
          padding: 1px 5px;
          border-radius: 4px;
          margin-left: 6px;
          font-weight: normal;
        }
        
        .pet-attributes {
          padding: 10px;
          background-color: #f5f7fa;
          border-radius: 6px;
          border: 1px solid #ebeef5;
          
          .attr-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 12px;
            margin-bottom: 12px;
          }
          
          .attr-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 5px;
            background-color: rgba(255, 255, 250, 0.7);
            border-radius: 4px;
          }
          
          .attr-label {
            font-size: 12px;
            color: #606266;
            margin-bottom: 4px;
          }
          
          .attr-value {
            font-size: 14px;
            font-weight: 600;
            
            &.level {
              color: #67c23a;
            }
            
            &.iv-common { color: #909399; }
            &.iv-good { color: #409EFF; }
            &.iv-great { color: #67c23a; }
            &.iv-perfect { color: #e6a23c; }
          }
          
          .ev-stats-container {
            margin-top: 8px;
          }
          
          .ev-stats-title {
            font-size: 13px;
            color: #606266;
            margin-bottom: 8px;
            text-align: center;
            background-color: rgba(255, 255, 250, 0.5);
            border-radius: 4px;
            padding: 2px 0;
          }
          
          .ev-stats {
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            gap: 6px;
            
            .ev-stat {
              display: flex;
              flex-direction: column;
              align-items: center;
              background-color: rgba(255, 255, 250, 0.7);
              border-radius: 4px;
              padding: 4px;
            }
            
            .ev-name {
              font-size: 12px;
              color: #909399;
              margin-bottom: 2px;
            }
            
            .ev-value {
              font-size: 14px;
              font-weight: 600;
              color: #409EFF;
              
              &:empty::after {
                content: "0";
                color: #c0c4cc;
              }
            }
          }
        }
        
        .item-quantity-container {
          margin-top: 10px;
          display: flex;
          justify-content: center;
          padding: 10px;
          background-color: #f5f7fa;
          border-radius: 6px;
          border: 1px solid #ebeef5;
          
          .item-quantity {
            font-size: 14px;
            font-weight: 600;
            color: #409EFF;
          }
        }
      }
    }
  }
  
  .listing-section {
    flex: 1.5;
    display: flex;
    flex-direction: column;
    height: auto; // 确保高度填满父容器
    margin-left: 10px;
    
    
    .no-item-selected {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .listing-details {
      height: 100%;
      display: flex;
      flex-direction: column;
      
      .item-preview {
        background: #f5f7fa;
        padding: 16px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        gap: 16px;
        margin-bottom: 20px;
        
        .preview-image {
          width: 80px;
          height: 80px;
          background: white;
          border-radius: 8px;
          padding: 5px;
        }
        
        .preview-details {
          flex: 1;
          
          .preview-name {
            margin: 0 0 8px;
            font-size: 18px;
            font-weight: 600;
          }
          
          .preview-tags {
            display: flex;
            align-items: center;
            gap: 8px;
            
            .el-tag {
              margin-bottom: 8px;
            }
            
            .pet-level,
            .pet-iv {
              font-size: 14px;
              color: #606266;
              margin-right: 5px;
            }
          }
          
          .preview-description {
            margin: 8px 0 0;
            color: #606266;
            font-size: 14px;
            line-height: 1.5;
          }
        }
      }
      
      .listing-form {
        flex: 0 0 auto;
      }
      
      .flex-spacer {
        flex: 1 1 auto; // 这个元素会占用所有剩余空间
      }
      
      .listing-actions {
        margin-top: 16px;
        display: flex;
        justify-content: flex-end;
        gap: 12px;
        padding-top: 16px;
        border-top: 1px solid #ebeef5;
      }
    }
  }
  
  // 加载状态样式优化
  .el-loading-mask {
    border-radius: 8px; // 圆角
    background-color: rgba(255, 255, 255, 0.8); // 半透明背景
    
    .el-loading-spinner {
      .circular {
        width: 42px;
        height: 42px;
      }
      
      .el-loading-text {
        font-size: 14px;
        margin-top: 12px;
        color: #409EFF;
      }
    }
  }
}

// 对话框样式调整
.el-dialog {
  margin-top: 3vh !important;  // 调整dialog位置，往上移动
  max-height: 95vh !important;  // 再次增加对话框高度，提供更充足的显示空间
  width: 80% !important;  // 设置宽度为80%
  max-width: 1200px !important;  // 设置最大宽度
  
  .el-dialog__header {
    padding: 10px 20px 0 20px;  // 调整header内边距
    
    .dialog-header-tabs {
      .header-tabs {
        .el-tabs__header {
          margin: 0;  // 移除默认margin
        }
        
        .el-tabs__nav-wrap {
          &::after {
            display: none;  // 隐藏底部边框线
          }
        }
        
        .el-tabs__item {
          font-size: 16px;
          font-weight: 500;
          color: #606266;
          
          &.is-active {
            color: #165dff;
            font-weight: 600;
          }
        }
      }
    }
  }
  
  .el-dialog__body {
    padding: 20px;  // 增加内边距
    overflow-y: auto;  // 内容超出时显示滚动条
    max-height: 75vh;  // 再次增加body区域高度，提供更充足的内容显示空间
  }
  
  .el-dialog__footer {
    padding: 15px 20px;
    border-top: 1px solid #ebeef5;
    
    // 只有当显示交易记录分页时才应用特殊样式
    .dialog-footer-pagination {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      min-height: 40px;  // 确保分页组件有足够高度
      padding: 5px 0;
      
      :deep(.el-pagination) {
        flex-shrink: 0;
        min-width: fit-content;
        
        .el-pagination__total,
        .el-pagination__sizes {
          color: #606266;
        }
        
        // 确保分页按钮不会过小
        .el-pager li {
          min-width: 30px;
          height: 32px;
          line-height: 30px;
        }
        
        // 调整间距以适应较小的容器
        .el-pagination__sizes,
        .el-pagination__jump {
          margin-left: 8px;
        }
        
        // 确保所有分页元素有合适的高度
        .el-pagination__total,
        .el-pagination__sizes,
        .el-pagination__jump {
          height: 32px;
          line-height: 32px;
        }
      }
    }
  }
  
  // 当footer中有分页组件时，增加footer的高度和特殊样式
  &:has(.dialog-footer-pagination) .el-dialog__footer {
    padding: 20px;
    overflow: visible;
    min-height: 90px;  // 增加最小高度，确保分页组件有足够空间
    max-height: 15vh;  // 限制footer最大高度，防止过度占用空间
  }
}

// 响应式设计
@media (max-width: 768px) {
  .list-item-container {
    flex-direction: column;
    max-height: none;  // 移动端取消最大高度限制
    
    .inventory-section {
      max-width: 100%;
      
      .inventory-list {
        height: 300px;  // 移动端稍微调小高度
      }
    }
  }
}

.inventory-section {
  .section-header {
    margin-bottom: 16px;
    
    h3 {
      margin: 0 0 12px;
      font-size: 18px;
      font-weight: 600;
      color: #303133;
    }
    
    .filter-container {
      display: flex;
      flex-direction: column;
      gap: 10px;
      background-color: #f5f7fa;
      border-radius: 8px;
      padding: 12px;
      
      .inventory-search {
        width: 100%;
      }
      
      .filter-type {
        display: flex;
        justify-content: center;
        
        .el-radio-group {
          .el-radio-button__inner {
            padding: 8px 15px;
          }
        }
      }
    }
  }
}

.inventory-item-type {
  display: flex;
  align-items: center;
  gap: 8px;
  
  .pet-level {
    font-size: 12px;
    color: #67c23a;
    background: rgba(103, 194, 58, 0.1);
    padding: 1px 4px;
    border-radius: 3px;
  }
  
  .pet-iv {
    font-size: 12px;
    padding: 1px 4px;
    border-radius: 3px;
    font-weight: 500;
    
    &.iv-common {
      color: #909399;
      background: rgba(144, 147, 153, 0.1);
    }
    
    &.iv-good {
      color: #409EFF;
      background: rgba(64, 158, 255, 0.1);
    }
    
    &.iv-great {
      color: #67c23a;
      background: rgba(103, 194, 58, 0.1);
    }
    
    &.iv-perfect {
      color: #e6a23c;
      background: rgba(230, 162, 60, 0.1);
    }
  }
  
  // 添加道具数量样式
  .item-quantity {
    font-size: 12px;
    color: #409EFF;
    background: rgba(64, 158, 255, 0.1);
    padding: 1px 4px;
    border-radius: 3px;
  }
}

.preview-details {
  .preview-pet-info,
  .preview-item-info {
    margin: 12px 0;
    padding: 10px;
    background-color: #f5f7fa;
    border-radius: 6px;
    border: 1px solid #e4e7ed;
    
    .pet-info-row,
    .item-info-row {
      display: flex;
      align-items: center;
      gap: 20px;
    }
    
    .pet-info-item,
    .item-info-item {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    
    .pet-info-label,
    .item-info-label {
      font-size: 13px;
      color: #909399;
      margin-right: 6px;
    }
    
    .pet-info-value,
    .item-info-value {
      font-size: 14px;
      font-weight: 600;
      
      &.level {
        color: #67c23a;
      }
      
      &.iv {
        &.iv-common { color: #909399; }
        &.iv-good { color: #409EFF; }
        &.iv-great { color: #67c23a; }
        &.iv-perfect { color: #e6a23c; }
      }
      
      &.quantity {
        color: #409EFF;
      }
    }
  }
  
  .preview-description {
    margin: 12px 0 0;
    color: #606266;
    font-size: 14px;
    line-height: 1.6;
    background-color: #f9f9f9;
    padding: 10px;
    border-radius: 6px;
    border: 1px solid #e4e7ed;
  }
}

.pet-attributes {
  margin: 12px 0;
  padding: 10px;
  background-color: #f5f7fa;
  border-radius: 6px;
  border: 1px solid #e4e7ed;
  
  .attr-row {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 10px;
  }
  
  .attr-item {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .attr-label {
    font-size: 13px;
    color: #909399;
    margin-right: 6px;
  }
  
  .attr-value {
    font-size: 14px;
    font-weight: 600;
    
    &.level {
      color: #67c23a;
    }
    
    &.iv {
      &.iv-common { color: #909399; }
      &.iv-good { color: #409EFF; }
      &.iv-great { color: #67c23a; }
      &.iv-perfect { color: #e6a23c; }
    }
  }
}

.item-quantity-container {
  margin-top: 10px;
  display: flex;
  justify-content: center;
  padding: 10px;
  background-color: #f5f7fa;
  border-radius: 6px;
  border: 1px solid #e4e7ed;
  
  .item-quantity {
    font-size: 14px;
    font-weight: 600;
  }
}

.shiny-badge {
  font-size: 12px;
  color: #e6a23c;
  background: rgba(230, 162, 60, 0.1);
  padding: 2px 6px;
  border-radius: 3px;
  margin-left: 5px;
}

.inventory-item-header {
  display: flex;
  gap: 10px;
}

.pet-attributes {
  margin-top: 10px;
  padding: 10px;
  background-color: #f5f7fa;
  border-radius: 6px;
  border: 1px solid #e4e7ed;
  
  .attr-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
  }
  
  .attr-item {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .attr-label {
    font-size: 12px;
    color: #606266;
    margin-bottom: 5px;
  }
  
  .attr-value {
    font-size: 14px;
    font-weight: 600;
    
    &.level {
      color: #67c23a;
    }
    
    &.iv {
      &.iv-common { color: #909399; }
      &.iv-good { color: #409EFF; }
      &.iv-great { color: #67c23a; }
      &.iv-perfect { color: #e6a23c; }
    }
  }
  
  .ev-stats {
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    
    .ev-stat {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    
    .ev-name {
      font-size: 12px;
      color: #909399;
      margin-bottom: 5px;
    }
    
    .ev-value {
      font-size: 14px;
      font-weight: 600;
    }
  }
}

.item-quantity-container {
  margin-top: 10px;
  display: flex;
  justify-content: center;
  padding: 10px;
  background-color: #f5f7fa;
  border-radius: 6px;
  border: 1px solid #e4e7ed;
  
  .item-quantity {
    font-size: 14px;
    font-weight: 600;
  }
}

.shiny-badge {
  font-size: 12px;
  color: #e6a23c;
  background: rgba(230, 162, 60, 0.1);
  padding: 2px 6px;
  border-radius: 3px;
  margin-left: 5px;
}

.item-detail-card{
  position: fixed;
  z-index: 2000;
  background: white;
  border: 1px solid #e4e7ed;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  width: 350px;
  padding: 16px;
  transition: all 0.3s ease;
  
  /* 默认样式 */
  max-height: none;
  overflow-y: visible;
  
  /* 箭头指示器基本样式 */
  &.top-position::after,
  &.right-position::after,
  &.bottom-position::after,
  &.left-position::after {
    content: '';
    position: absolute;
    width: 12px;
    height: 12px;
    background: white;
    transform: rotate(45deg);
  }
  
  /* 上方位置 - 箭头在下方 */
  &.top-position::after {
    bottom: -6px;
    left: 50%;
    margin-left: -6px;
    border-right: 1px solid #e4e7ed;
    border-bottom: 1px solid #e4e7ed;
  }
  
  /* 右侧位置 - 箭头在左侧 */
  &.right-position::after {
    left: -6px;
    top: 50%;
    margin-top: -6px;
    border-bottom: 1px solid #e4e7ed;
    border-left: 1px solid #e4e7ed;
  }
  
  /* 下方位置 - 箭头在上方 */
  &.bottom-position::after {
    top: -6px;
    left: 50%;
    margin-left: -6px;
    border-left: 1px solid #e4e7ed;
    border-top: 1px solid #e4e7ed;
  }
  
  /* 左侧位置 - 箭头在右侧 */
  &.left-position::after {
    right: -6px;
    top: 50%;
    margin-top: -6px;
    border-top: 1px solid #e4e7ed;
    border-right: 1px solid #e4e7ed;
  }
  
  /* 根据物品类型应用不同样式 */
  &.pet-type {
    max-height: 550px; /* 宠物需要更多高度 */
  }
  
  &.item-type {
    max-height: 550px; /* 道具可以用较小高度 */
  }
  
  /* 美化滚动条 */
  &::-webkit-scrollbar {
    width: 6px;
  }
  
  &::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
  }
  
  &::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
  }
  
  &::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
  }
}

/* 修改价格走势图区域样式 */
.price-chart-section {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #ebeef5;
  /* 移除底部过大的边距 */
  margin-bottom: 0;
  padding-bottom: 0;
}

.section-title {
  font-size: 14px;
  color: #606266;
  margin: 0 0 5px 0; /* 减小标题下方间距 */
}

.detail-chart-container {
  height: 160px; /* 减小图表高度 */
  width: 100%;
}

/* 修改悬浮面板样式 */
.item-detail-card {
  /* 其他样式保持不变 */
  padding: 16px 16px 0 16px; /* 减少底部内边距 */
}

/* 如果底部还有空白区域，可以检查是否有其他元素添加了边距 */
.detail-card-content {
  padding-bottom: 0; /* 确保内容区域没有额外底部内边距 */
}

.detail-card-header {
  display: flex;
  align-items: center;
  // margin-bottom: 16px;
}

.detail-card-image {
  position: relative;
  width: 80px;
  height: 80px;
  margin-right: 16px;
}

.detail-card-image .el-image {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  overflow: hidden;
}

.shiny-tag {
  position: absolute;
  top: -8px;
  right: -8px;
  background: #e6a23c;
  color: white;
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 4px;
}

.detail-card-title {
  flex: 1;
}

.detail-card-title h3 {
  margin: 0 0 8px 0;
  font-size: 18px;
}

.detail-info-row {
  display: flex;
  justify-content: space-between;
  // margin-bottom: 16px;
}

detail-info-item {
  display: flex;
  flex-direction: column;
}

.info-label {
  font-size: 12px;
  color: #909399;
  margin-bottom: 4px;
}

.info-value {
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 600;
}

.info-value.price {
  color: #ff6b6b;
}

.info-value.seller {
  display: flex;
  align-items: center;
  gap: 8px;
}

.detail-pet-info,
.detail-item-info {
  background: #f5f7fa;
  border-radius: 8px;
  padding: 12px;
}

.pet-info-row,
.item-info-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
}

.pet-info-item,
.item-info-item {
  display: flex;
  flex-direction: column;
}

.pet-stats {
  display: flex;
  justify-content: space-between;
}

.stat-item {
  display: flex;
  flex-direction: column;
}

.stat-label {
  font-size: 12px;
  color: #909399;
  margin-bottom: 4px;
}

.stat-value {
  font-size: 14px;
}

.info-value.level {
  color: #67c23a;
}

.info-value.iv {
  &.iv-common { color: #909399; }
  &.iv-good { color: #409EFF; }
  &.iv-great { color: #67c23a; }
  &.iv-perfect { color: #e6a23c; }
}

/* 调整精灵列表项布局样式 */
.inventory-item {
  border: 1px solid #e4e7ed;
  border-radius: 6px; /* 减小圆角 */
  padding: 8px; /* 减小内边距 */
  margin-bottom: 8px; /* 减小下边距 */
  cursor: pointer;
  transition: all 0.2s ease;
  
  &:hover {
    border-color: #c0c4cc;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
  
  &.inventory-item-selected {
    border-color: #409EFF;
    background-color: rgba(64, 158, 255, 0.1);
  }
}

.inventory-item-content {
  display: flex;
  align-items: center; /* 改为居中对齐 */
}

.inventory-item-left {
  flex: 0 0 auto;
  width: 70px; /* 减小宽度 */
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-left: -10px;
}

.inventory-item-image {
  width: 60px; /* 减小图片尺寸 */
  height: 60px;
  border-radius: 4px;
  margin-bottom: 4px;
}

.inventory-item-name {
  font-weight: 600;
  font-size: 12px; /* 减小字体 */
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 70px;
  text-align: center;
}

/* 重新设计属性部分 - 更紧凑的横向布局 */
.pet-attributes-compact {
  flex: 1;
  display: flex;
  align-items: stretch;
  gap: 8px;
}

/* 基本属性横向排列 */
.basic-attributes {
  flex: 0 0 auto;
  width: 100px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: rgba(245, 247, 250, 0.6);
  border-radius: 4px;
  padding: 4px 6px;
}

.basic-attr-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2px 0;
}

.attr-label {
  font-size: 10px;
  color: #909399;
  margin-bottom: 1px;
}

.attr-value {
  font-size: 12px;
  font-weight: 600;
}

.attr-value.level {
  color: #67c23a;
}

/* 学习力统计 - 统一网格布局 */
.ev-stats-compact {
  flex: 1;
  background-color: rgba(245, 247, 250, 0.6);
  border-radius: 4px;
  padding: 4px 6px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-gap: 2px;
  align-items: center;
}

.ev-stat-compact {
  display: flex;
  align-items: center;
  justify-content: center;
}

.ev-label {
  font-size: 10px;
  color: #909399;
  margin-right: 3px;
}

.ev-value {
  font-size: 11px;
  font-weight: 600;
}

/* 道具数量显示 */
.item-quantity-display {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 50px;
}

/* 精灵属性的统一紧凑布局 - 修复挤在一起的问题 */
.pet-attributes-unified {
  flex: 1;
  display: grid;
  /* 关键修改：将网格定义为4列和6列的二维布局 */
  grid-template-areas: 
    "p1 p2 p3 p4"
    "e1 e2 e3 e4 e5 e6";
  /* 修改列定义，确保第二行有足够空间 */
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto auto;
  grid-gap: 4px;
  background-color: rgba(245, 247, 250, 0.7);
  border-radius: 4px;
  padding: 6px;
  /* 增加最小宽度，确保有足够空间显示6个学习力属性 */
  min-width: 300px;
}





/* 指定第一行每个元素的网格区域 */
.pet-attributes-unified > .attr-item:nth-child(1) { grid-area: p1; }
.pet-attributes-unified > .attr-item:nth-child(2) { grid-area: p2; }
.pet-attributes-unified > .attr-item:nth-child(3) { grid-area: p3; }
.pet-attributes-unified > .attr-item:nth-child(4) { grid-area: p4; }

/* 指定第二行每个元素的网格区域 */
.pet-attributes-unified > .attr-item:nth-child(5) { grid-area: e1; }
.pet-attributes-unified > .attr-item:nth-child(6) { grid-area: e2; }
.pet-attributes-unified > .attr-item:nth-child(7) { grid-area: e3; }
.pet-attributes-unified > .attr-item:nth-child(8) { grid-area: e4; }
.pet-attributes-unified > .attr-item:nth-child(9) { grid-area: e5; }
.pet-attributes-unified > .attr-item:nth-child(10) { grid-area: e6; }

/* 优化网格布局 */
.pet-attributes-unified {
  grid-template-columns: repeat(6, 1fr); /* 修改为6列 */
  grid-template-areas:
    "p1 p1 p2 p2 p3 p3 p4 p4"
    "e1 e2 e3 e4 e5 e6";
}

/* 修复网格布局错误 */
.pet-attributes-unified {
  display: grid;
  grid-template-columns: repeat(12, 1fr); /* 使用12列以便更容易分配比例 */
  grid-template-areas: 
    "p1 p1 p1 p2 p2 p2 p3 p3 p3 p4 p4 p4"
    "e1 e1 e2 e2 e3 e3 e4 e4 e5 e5 e6 e6";
  grid-gap: 4px;
  background-color: rgba(245, 247, 250, 0.7);
  border-radius: 4px;
  padding: 6px;
  min-width: 300px;
  flex: 1 1 auto;
}


/* 特殊值样式 */
.attr-value.level { color: #67c23a; }
.attr-value.ability { color: #409EFF; }
.attr-value.addMaxHP { color: #e6a23c; }

/* 精灵属性的flex布局 */
.pet-attributes-flex {
  flex: 1;
  display: flex;
  flex-direction: column;
  background-color: rgba(245, 247, 250, 0.7);
  border-radius: 4px;
  padding: 6px;
  gap: 6px;
  min-width: 230px;
}

.pet-attributes-flex .attr-row {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.pet-attributes-flex .attr-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}

.pet-attributes-flex .attr-label {
  font-size: 10px;
  color: #909399;
  margin-bottom: 2px;
}

.pet-attributes-flex .attr-value {
  font-size: 12px;
  font-weight: 600;
}

.pet-attributes-flex .attr-value.level {
  color: #67c23a;
}

.pet-attributes-flex .attr-value.ability {
  max-width: 60px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pet-attributes-flex .attr-value.addMaxHP {
  color: #409EFF;
}

/* 保留原有的IV颜色样式 */

.quantity-text {
  color: #409EFF;
  font-weight: 600;
  &::after {
    content: ' 个';
    font-weight: normal;
    color: #909399;
    font-size: 12px;
  }
}

/* 购买数量选择对话框样式 */
.buy-quantity-dialog {
  :deep(.el-dialog__body) {
    padding: 20px;
  }
  
  .buy-item-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  
  .buy-item-info {
    display: flex;
    gap: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #f0f0f0;
  }
  
  .buy-item-image {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    background-color: #f5f7fa;
    padding: 5px;
  }
  
  .buy-item-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  
  .buy-item-name {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
  }
  
  .buy-item-price, .buy-item-stock {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 14px;
  }
  
  .price-value {
    color: #f56c6c;
    font-weight: 600;
  }
  
  .buy-quantity-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
  }
  
  .quantity-label {
    font-size: 15px;
    font-weight: 500;
  }
  
  .buy-total-price {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 0;
    border-top: 1px solid #f0f0f0;
    font-size: 16px;
  }
  
  .total-label {
    font-weight: 500;
  }
  
  .total-value {
    color: #f56c6c;
    font-weight: 700;
    font-size: 18px;
  }
  
  .dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
  }
}

.prop-card {
  width: 240px;
  margin: 10px;
  border-radius: 12px;
  transition: transform 0.3s;
}

.prop-card:hover {
  transform: translateY(-5px);
}

.prop-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px;
}

.prop-image-container {
  position: relative;
  width: 100px;
  height: 100px;
  margin-bottom: 10px;
}

.prop-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.prop-quantity {
  position: absolute;
  bottom: -5px;
  right: -5px;
  background-color: var(--el-color-primary);
  color: white;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 12px;
}

.prop-info {
  text-align: center;
  width: 100%;
}

.prop-name {
  margin: 5px 0;
  font-size: 16px;
  color: var(--el-color-primary);
}

.prop-description {
  margin: 10px 0;
  padding: 8px;
  background-color: var(--el-color-info-light-9);
  border-radius: 6px;
  font-size: 13px;
  color: var(--el-text-color-secondary);
  min-height: 40px;
}

.prop-actions {
  display: flex;
  justify-content: space-around;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--el-border-color-lighter);
}

.image-placeholder {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background-color: var(--el-color-info-light-9);
  color: var(--el-text-color-secondary);
}

/* 道具详情容器 - 与精灵完全不同的样式 */
.item-details-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  background-color: rgba(103, 194, 58, 0.05);
  border-radius: 6px;
  padding: 10px;
  margin-left: 10px;
  border-left: 2px solid #409eff;
  min-width: 220px;
}

.item-details-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.item-quantity-badge {
  display: flex;
  align-items: center;
  background-color: #f0f9eb;
  color: #409eff;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 12px;
  
  .el-icon {
    margin-right: 4px;
    font-size: 14px;
  }
}

.item-details-body {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

.item-property {
  display: flex;
  flex-direction: column;
  
  .property-label {
    font-size: 11px;
    color: #909399;
    margin-bottom: 2px;
  }
  
  .property-value {
    font-size: 13px;
    font-weight: 500;
    color: #303133;
  }
}

.item-description {
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 4px;
  padding: 6px 8px;
  margin-top: auto;
  
  p {
    margin: 0;
    font-size: 12px;
    color: #606266;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* 确保和精灵属性区域不冲突的样式 */
.inventory-item-content {
  .item-quantity-display {
    display: none; /* 隐藏旧的数量显示 */
  }
}


/* 简约道具容器 - 确保与精灵样式区分 */
.item-simple-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  background-color: #f9f9f9;
  border-radius: 4px;
  padding: 8px 10px;
  margin-left: 10px;
  min-width: 220px;
}

.item-simple-header {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.item-quantity {
  font-size: 14px;
  font-weight: 600;
  color: #67c23a;
  background: rgba(103, 194, 58, 0.1);
  padding: 2px 8px;
  border-radius: 12px;
}

.item-simple-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.item-simple-property {
  display: flex;
  flex-direction: column;
  
  .property-label {
    font-size: 12px;
    color: #909399;
    margin-bottom: 2px;
  }
  
  .property-value {
    font-size: 13px;
    color: #303133;
    
    &.description {
      line-height: 1.4;
      font-size: 12px;
      color: #606266;
    }
  }
}

/* 修复道具名称不完全显示的问题 */
.inventory-item-left {
  width: 80px; /* 增加宽度 */
  
  .inventory-item-name {
    max-width: 80px; /* 增加最大宽度 */
    white-space: normal; /* 允许文本换行 */
    word-break: break-word; /* 在必要时允许单词内换行 */
    display: -webkit-box;
    -webkit-line-clamp: 2; /* 限制为两行 */
    -webkit-box-orient: vertical;
    height: auto; /* 允许自动调整高度 */
    line-height: 1.2;
  }
}

/* 确保样式不与精灵属性冲突 */
.inventory-item-content {
  .pet-attributes-flex {
    /* 精灵特有样式 */
    background-color: rgba(64, 158, 255, 0.05);
  }
  
  .item-details-container {
    display: none; /* 隐藏旧的道具容器 */
  }
}

/* 左侧图片居中显示 */
.inventory-item:has(.item-display) .inventory-item-left {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 70px;
}

/* 可悬浮显示提示的表格行样式 */
.hoverable-row {
  cursor: pointer;
  transition: background-color 0.3s;
  
  &:hover {
    background-color: #f5f7fa;
  }
}

/* 自定义tooltip样式 */
:deep(.el-tooltip__popper) {
  max-width: 300px;
  line-height: 1.5;
  padding: 10px 12px;
  
  p {
    margin: 0;
    font-size: 13px;
  }
}

.order-id-cell {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px; /* 可根据实际需要调整 */
  margin: 0;
}

/* 价格显示样式 */
.price-text {
  font-weight: 600;
  font-size: 14px;
  
  &.price-negative {
    color: #f56c6c; /* 支出使用红色 */
  }
}

/* 修改物品名称的显示样式，确保单行显示 */
.history-item-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 150px; /* 根据实际需要调整宽度 */
  display: block;
  margin-bottom: 4px;
}

/* 修改物品名称的显示样式，确保单行显示 */
.history-item-info .history-item-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%; /* 使用百分比适应容器宽度 */
  display: inline-block; /* 使用inline-block而不是block */
}

/* 交易记录分页控件特定样式 */
.history-container .pagination-container {
  margin-top: 30px; /* 增加与表格之间的间距 */
}

/* 确保图片本身也是contain模式 */
.history-item-image img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.search-section {
  margin-bottom: 20px;
  
  .search-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .search-form {
    // ... 现有样式 ...
  }
  
  .bean-balance {
    display: flex;
    align-items: center;
    padding: 8px 16px;
    background: linear-gradient(135deg, #e6f1ff, #f0f7ff);
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(64, 158, 255, 0.2);
    
    .balance-container {
      display: flex;
      align-items: center;
      cursor: default;
      
      img {
        width: 35px;
        height: 35px;
        margin-right: 8px;
      }
      
      .balance-amount {
        font-size: 18px;
        font-weight: 700;
        color: #409EFF;
        margin-right: 4px;
        margin-left: 10px;
      }
      
      .balance-label {
        font-size: 13px;
        color: #909399;
      }
    }
  }
}

// ... 其他样式 ...

/* 添加或修改样式 */
.item-card {
  position: relative;
  /* 保留其他样式 */
}

.left-corner-tags {
  position: absolute;
  left: 8px;
  top: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 2;
  
  .el-tag {
    margin: 0;
    border-radius: 4px;
    font-size: 12px;
    padding: 0 6px;
    height: 22px;
    line-height: 22px;
    font-weight: bold;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  
  .level-tag {
    background-color: rgba(230, 162, 60, 0.9);
    border-color: rgba(230, 162, 60, 0.9);
    color: #fff;
  }
  
  .iv-tag {
    background-color: rgba(103, 194, 58, 0.9);
    border-color: rgba(103, 194, 58, 0.9);
    color: #fff;
  }
  
  .nature-tag {
    background-color: rgba(245, 108, 108, 0.9);
    border-color: rgba(245, 108, 108, 0.9);
    color: #fff;
  }
  .shiny-tag {
    background-color: #626aef;
    border-color: #626aef;
    color: #fff;
  }
}

.bean-balance .balance-container {
  display: flex;
  align-items: center;
}

.trade-account-section {
  display: flex;
  align-items: center;
  margin-left: 10px;
}

.trade-account-name {
  margin-right: 5px;
  font-weight: 500;
  color: #606266;
}

.sync-account-btn {
  color: #409EFF;
  padding: 0;
  margin-left: 5px;
}

.account-info-container {
  display: flex;
  align-items: center;
  gap: 15px; /* 增加间距 */
}

.bean-balance,
.trade-account-balance {
  display: flex;
  align-items: center;
  padding: 8px 16px;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(64, 158, 255, 0.2);
  height: 30px; /* 添加固定高度 */
}

.bean-balance {
  background: linear-gradient(135deg, #e6f1ff, #f0f7ff);
}

.trade-account-balance {
  background: linear-gradient(135deg, #f0f7f0, #f5fff5);
}

.balance-container {
  display: flex;
  align-items: center;
  cursor: default;
}

.trade-account-balance .balance-container .el-icon {
  color: #67c23a;
  margin-right: 8px;
  font-size: 24px;
}

.trade-account-balance .balance-amount {
  font-size: 16px;
  font-weight: 600;
  color: #67c23a;
  margin-right: 8px;
}

.sync-account-btn {
  color: #67c23a;
  padding: 4px;
  height: 24px;
  line-height: 24px;
  margin-left: 5px;
}

/* 新增移动端显示和隐藏规则 */
.desktop-only {
  display: block;
}
.mobile-only {
  display: none;
}
@media (max-width: 768px) {
  .desktop-only {
    display: none;
  }
  .mobile-only {
    display: block;
    margin-bottom: 24px;
  }
  .mobile-account-info {
    padding: 10px;
    border-radius: 8px;
  }
  .mobile-balance,
  .mobile-trade-balance {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .mobile-balance img,
  .mobile-trade-balance img {
    width: 25px;
    height: 25px;
    margin-right: 5px;
  }
}

/* 移动端分页组件样式 */
.mobile-pagination {
  width: 100%;
  padding: 15px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  
  .mobile-pagination-info {
    display: flex;
    justify-content: space-between;
    width: 100%;
    color: #909399;
    font-size: 14px;
  }
  
  .mobile-pagination-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    
    .mobile-page-btn {
      flex: 1;
      height: 40px;
      font-size: 15px;
      border-radius: 20px;
      
      &:first-child {
        margin-right: 10px;
      }
      
      &:last-child {
        margin-left: 10px;
      }
      
      &:active {
        opacity: 0.8;
      }
    }
    
    .mobile-page-size {
      width: 110px;
      
      :deep(.el-input__wrapper) {
        border-radius: 20px;
      }
    }
  }
}

// /* 在body最外层添加全局CEF浏览器修复 */
// :deep(.el-popper) {
//   /* 下拉菜单样式修复 */
//   .el-select-dropdown__wrap {
//     max-height: 274px !important;
//   }
  
//   .el-select-dropdown__item {
//     height: 34px !important;
//     line-height: 34px !important;
//   }
// }

/* 调整表格在CEF浏览器中的显示 */
:deep(.el-table) {
  th.el-table__cell {
    height: 40px !important;
    line-height: 40px !important;
  }
  
  td.el-table__cell {
    height: 48px !important;
    line-height: 1.5 !important;
  }
}

/* 确保整体页面正常显示，防止排版问题 */
.trade-container {
  min-height: 500px;
  overflow-x: hidden;
}

/* 移除搜索表单中可能导致拉伸的不必要的样式 */
.search-section .search-form {
  :deep(.el-form--inline) {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center !important;
  }
  
  :deep(.el-form-item__content) {
    height: 32px !important;
    line-height: 32px !important;
  }
}

/* 为CEF浏览器添加特定下拉框修复 */
.search-section {
  /* 直接针对下拉框元素容器 */
  :deep(.el-select) {
    .el-input {
      width: 100% !important;
      height: 32px !important;
    }
    
    .el-input__wrapper {
      height: 32px !important;
      line-height: 32px !important;
      padding: 0 11px !important;
      box-shadow: 0 0 0 1px var(--el-input-border-color, var(--el-border-color)) inset !important;
    }
    
    .el-input__inner {
      height: 32px !important;
      line-height: 32px !important;
      min-height: 32px !important;
      max-height: 32px !important;
    }
  }
  
  /* 限制下拉框内容区域的大小 */
  .el-form-item {
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    
    .el-form-item__content {
      height: 32px !important;
      max-height: 32px !important;
      overflow: visible !important;
    }
  }
}

/* 直接修复全局下拉菜单 */
:deep(.el-select__popper),
:deep(.el-select-dropdown) {
  max-height: 300px !important;
  
  .el-scrollbar__wrap {
    max-height: 260px !important;
  }
  
  .el-select-dropdown__list {
    padding: 0 !important;
  }
  
  .el-select-dropdown__item {
    height: 34px !important;
    line-height: 34px !important;
    padding: 0 8px !important;
  }
}

/* 确保物品类型、性格、特性和排序下拉框垂直尺寸正确 */
:deep(.el-form-item:nth-child(2) .el-select),
:deep(.el-form-item:nth-child(4) .el-select),
:deep(.el-form-item:nth-child(5) .el-select),
:deep(.el-form-item:nth-child(6) .el-select) {
  .el-input,
  .el-input__wrapper,
  .el-input__inner {
    height: 32px !important;
    line-height: 32px !important;
    max-height: 32px !important;
    box-sizing: border-box !important;
  }
}

/* 确保所有原生下拉框鼠标悬浮时显示手型指针 */
select {
  cursor: pointer !important;
}

.custom-select {
  padding: 6px 12px;
  font-size: 14px;
  color: #606266;
  background-color: #fff;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  appearance: none; /* 移除默认的样式（特别是在Safari和一些浏览器中） */
  outline: none;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.custom-select:focus {
  border-color: #409eff; /* 聚焦时的边框颜色 */
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2); /* 聚焦时的阴影效果 */
}

/* 改变悬停时的边框颜色 */
.custom-select:hover {
  border-color: #409eff;
}

/* 自定义下拉箭头 */
.custom-select::-ms-expand {
  display: none; /* 隐藏IE和Edge中的默认下拉箭头 */
}

.custom-select option {
  font-size: 14px;
  padding: 8px 12px;
}
/* 时装显示相关样式 */
.fashion-display {
  background-color: rgba(149, 128, 255, 0.05);
  border-radius: 4px;
}

.fashion-tag {
  background-color: #e6dcff !important;
  border-color: #d3c4ff !important;
  color: #722ed1 !important;
}

.fashion-quantity {
  color: #722ed1;
  font-weight: bold;
}

.fashion-description {
  color: #722ed1;
  font-size: 13px;
}

/* 时装类型的徽章样式 */
// .item-badge.fashion-type {
//   background-color: #9254de;
//   color: white;
// }

/* 滚动加载组件样式 */
.inventory-scroll-loading {
  padding: 20px;
  text-align: center;
  border-top: 1px solid #ebeef5;
  margin-top: 10px;
  
  .load-more-btn {
    background: linear-gradient(135deg, #409eff, #36a3f7);
    border: none;
    color: white;
    padding: 10px 24px;
    border-radius: 20px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(64, 158, 255, 0.3);
    
    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(64, 158, 255, 0.4);
    }
    
    &:disabled {
      background: #c0c4cc;
      cursor: not-allowed;
      transform: none;
      box-shadow: none;
    }
  }
  
  .loading-text {
    color: #909399;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    
    .el-icon {
      animation: rotate 1s linear infinite;
    }
  }
  
  .no-more-text {
    color: #c0c4cc;
    font-size: 13px;
    font-style: italic;
  }
}

@keyframes loading-rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* 搜索加载动画 */
.search-loading-container {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 0;
  color: var(--el-text-color-secondary);
  
  .el-icon {
    margin-right: 8px;
    font-size: 16px;
    animation: loading-rotate 1s linear infinite;
  }
}